<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS过渡</title>
    <link href="../myCss/trans.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="example">
    <div v-if="show" transition="expand">Hello</div>
    <input type="button" value="toggle" @click="show = !show">
</div>
<script src="../js/vue.js"></script>
<script>
    var cssTran = new Vue({
        el: '#example',
        data: {
            show: true
        },
        transitions: {
            expand: {
                beforeEnter: function(el){
                    el.textContent= 'beforeEnter';
                },
                enter: function (el) {
                    el.textContent = 'enter';
                },
                afterEnter: function (el) {
                    el.textContent = 'afterEnter';
                },
                enterCancelled: function (el) {
                    //handle cancellation
                },

                beforeLeave: function (el) {
                    el.textContent = 'beforeLeave';
                },
                leave: function (el) {
                    el.textContent = 'leave';
                },
                afterLeave: function (el) {
                    el.textContent = 'afterLeave';
                },
                leaveCancelled: function (el) {
                    //handle cancellation
                }
            }
        }
    });
//    Vue.transition('expand', {
//        beforeEnter: function(el){
//            el.textContent= 'beforeEnter';
//        },
//        enter: function (el) {
//            el.textContent = 'enter';
//        },
//        afterEnter: function (el) {
//            el.textContent = 'afterEnter';
//        },
//        enterCancelled: function (el) {
//            //handle cancellation
//        },
//
//        beforeLeave: function (el) {
//            el.textContent = 'beforeLeave';
//        },
//        leave: function (el) {
//            el.textContent = 'leave';
//        },
//        afterLeave: function (el) {
//            el.textContent = 'afterLeave';
//        },
//        leaveCancelled: function (el) {
//            //handle cancellation
//        }
//    });
</script>
</body>
</html>